<html>
<head>
	<script type="text/javascript" src="diagram-editor.js"></script>
</head>
<body>
Example JavaScript API for editing static PNG and SVG images, objects with data URIs and SVG DOM with embedded XML.
<br>
Click on the images below to start editing.
<br>
<br>
PNG Image:<br>
<img style="cursor:pointer;" title="Click to edit image" onclick="DiagramEditor.editElement(this);"
	src=""/>
<br/>
<br>
SVG Image:<br>
<img style="cursor: pointer;" title="Click to edit image" onclick="DiagramEditor.editElement(this);"
	src="">
<br/>
<br>
<div style="height:1600px">Vertical spacer for testing scrollbars.</div>

SVG Object (wrapper needed to implement click handler):<br>
<div style="cursor: pointer; display:inline-block;" title="Click to edit image" onclick="DiagramEditor.editElement(this.firstChild);"><object style="pointer-events:none;"
	data="">
	</object>
</div>
<br/>
<br>
SVG DOM (wrapper needed to allow for replacing outerHTML on SVG element):<br>
<div style="cursor: pointer; display:inline-block;" title="Click to edit image" onclick="DiagramEditor.editElement(this.firstChild);"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="121px" height="61px" viewBox="-0.5 -0.5 121 61" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2020-01-27T15:32:40.178Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36&quot; etag=&quot;EXPbqWyuHeuT2c_98d6U&quot; version=&quot;12.5.8&quot;&gt;&lt;diagram id=&quot;emYRSDDRkDP2Yd3EZy3r&quot; name=&quot;Page-1&quot;&gt;jZLBboQgEIafhmuzSmLca+1299KTTXqmMhVSBIO4ap++UoYqMU160ZlvhpmfGQituvlqWS9eDAdF8hOfCX0ieZ4VJV1/niyBnPMygNZKHtBpA7X8AjwZ6Sg5DMgCcsYoJ/sUNkZraFzCmLVmStM+jEq79qyFJMODumHqSN8kdyLQMi82fgPZitg5K84h8s6az9aaUWM/bTSESMdiGdQwCMbNtEP0QmhljXHB6uYKlB9rOrHnP6IoeXBLvETUakG7f1WIl7gzNWKNVyEHn+I/zG8BBvdw6DQJ6aDuWeP9aX0ShD4K16nVy1bzKATF3sE6mHcIhV3BdODssqZgNA5tSd1pW04WmdgtpkDG8D20v4W3OawGjiK62w5+Yrs3Ti/f&lt;/diagram&gt;&lt;/mxfile&gt;"><defs></defs><g><rect x="0" y="0" width="120" height="60" fill="#ffffff" stroke="#000000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">This is a test.</div></div></div></foreignObject><text x="60" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">This is a test.</text></switch></g></g></svg>

</body>
</html>
